<template>
  <div class="page">
    <HeaderBar :fixed="true" :theme="theme" :active="'manufacture'"/>
    <div class="page-main">
      <div class="banner-box">
        <div class="banner-swiper swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item, index) in bannerList" :key="index">
              <div class="banner">
                <img oncontextmenu="return false" :src="item.photo" class="fit-img">
                <div class="banner-inner">
                  <div class="banner-title">{{ item.title }}</div>
                  <div class="banner-desc">{{ item.titles }}</div>
                  <div class="banner-content">{{ item.titles2 }}</div>
                  <div class="video-btn flex-center hv-opacity" @click="showVideo(item.video, item.photo)" v-if="item.video">
                    <img oncontextmenu="return false" src="@/assets/images/icon_video_mini.svg" class="icon">
                    <span class="label">查看视频</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="banner-tabs flex-center">
          <div class="banner-tab" v-for="(item, index) in bannerList" :key="index" :class="{ active: item.id == curBannerId }" @mouseover="bannerSlideTo(item.id, index)" @click="changeContent(item.id, index)">
            <div class="photo">
              <img oncontextmenu="return false" :src="item.photo" alt="" class="fit-img">
            </div>
            <div class="label">{{ item.title2 }}</div>
          </div>
        </div>    
      </div>
      <div class="content-main">
        <div class="jd-box" v-if="curInfo.is_bases1 == 1">
          <div class="jd-main">
            <div class="jd-title">{{ curInfo.product_base_title }}</div>
            <div class="jd-content" v-html="curInfo.product_base_content"></div>
            <div class="jd-card">
              <img oncontextmenu="return false" :src="curInfo.base_photo" class="fit-img" alt="">
              <i class="jd-card-l"></i>
              <i class="jd-card-s1"></i>
              <i class="jd-card-s2"></i>
              <div class="jd-list">
                <div class="jd-item" v-for="(item, index) in jdList" :key="index">
                  <div class="jd-item-title">
                    <div class="title f-number">{{ item.titles }}</div>
                    <div class="unit" v-if="item.hasPlus">+</div>
                    <i class="jd-item-icon"></i>
                  </div>
                  <div class="jd-item-desc">{{ item.title }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="sl-box"  v-show="curInfo.is_bases2 == 1">
          <div class="sl-hd">
            <div class="sl-title">
              <div class="title">{{ curInfo.workshop_title }}</div>
              <div class="desc">{{ curInfo.workshop_titles }}</div>
            </div>
            <!-- <div class="sl-swiper-nav">
              
            </div> -->
          </div>
          <div class="sl-swiper-box">
            <div class="prev-btn flex-center" @click="slSwiperToPrev">
              <i class="iconfont icon-arrow_left"></i>
            </div>
            <div class="next-btn flex-center" @click="slSwiperToNext">
              <i class="iconfont icon-arrow"></i>
            </div>
            <div class="sl-swiper swiper-container">
              <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item, index) in workShopList" :key="index">
                  <div class="app-card hv-scale">
                    <img oncontextmenu="return false" :src="item.photo" alt="" class="photo fit-img">
                    <div class="app-inner">
                      <div class="title">{{ item.title }}</div>
                      <div class="desc">{{ item.titles }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="zl-box" v-if="curInfo.is_bases3 == 1">
          <div class="zl-swiper swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(item, index) in qaList" :key="index">
                <div class="zl-banner">
                  <div class="zl-inner">
                    <div class="zl-inner-tag">{{ item.title }}</div>
                    <div class="zl-inner-title">{{ item.titles }}</div>
                  </div>
                  <img oncontextmenu="return false" :src="item.photo" class="fit-img">
                </div>
              </div>
            </div>
          </div>
          <div class="zl-tabs">
            <div class="zl-tab" :class="{'active': curQaIndex == index}" v-for="(item, index) in qaList" :key="index" v-show="index < 3">
              <div class="zl-hd flex-between" @click="showQaDetail(index)">
                <div class="zl-tab-title">{{ item.title2 }}</div>
                <div class="zl-icon flex-center">
                  <i class="iconfont icon-arrow_down"></i>
                </div>
              </div>
              <div class="zl-content" v-html="item.titles2"></div>
            </div>
          </div>
        </div>
        <div class="fy-box" v-if="curInfo.is_bases4 == 1">
          <img oncontextmenu="return false" :src="curInfo.factory_photo" class="fit-img">
          <div class="fy-inner">
            <div class="fy-title" v-html="curInfo.base_title"></div>
            <div class="fy-desc" v-html="curInfo.base_content"></div>
          </div>
          <div class="fy-info">
            <div class="fy-card" v-for="(item, index) in fyList" :key="index" :class="{'long': index == fyList.length - 1 && fyList.length % 2 == 1}">
              <div class="card-icon">
                <img oncontextmenu="return false" :src="item.photo" class="contain-img">
              </div>
              <div class="card-label">
                {{ item.title }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <FooterBar />
    </div>
  </div>
  <VideoPopup ref="videoPopupRef" />
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { formatText, hideLoading, getUrlParams, changeSearchParams } from '../../utils/utils'
import Swiper from 'swiper'
import { Mousewheel, EffectFade, Autoplay, Navigation } from 'swiper/modules'
import 'swiper/scss';
import 'swiper/scss/navigation'
import 'swiper/scss/effect-fade';
import VueScrollTo from 'vue-scrollto'
import { getBannerList, getManufactureInfo, getDataInfo, getWorkShopList, getQualityList, getBaseAttrList } from '@/api/manufacture' 

import HeaderBar from '@/components/HeaderBar/index.vue'
import FooterBar from '@/components/FooterBar/index.vue'
import VideoPopup from '@/components/VideoPopup/index.vue'
import WOW from 'wow.js'

let bannerSwiper, slSwiper, qaSwiper
const theme = ref('transparent')
const info = ref({})
const bannerList = ref([])
const curBannerIndex = ref(0)
const curBannerId = ref(0)
const curInfo = ref({})
const jdList = ref([]) // 数据列表
const workShopList = ref([]) // 实力轮播图
const qaList = ref([]) // 质量轮播图
const fyList = ref([]) // 工厂图
const curQaIndex = ref(0)
const videoPopupRef = ref(null)

onMounted(() => {
  loadBannerList()
  window.addEventListener('scroll', (event) => {
    const scrollTop = window.scrollY
    console.log(scrollTop)
    if (scrollTop > 100) {
      theme.value = 'white'
    } else {
      theme.value = 'transparent'
    }
  });
  const wow = new WOW({
    // scrollContainer: 'body',
    offset: 100
  })
  wow.init()
});

const loadBannerList = () => {
  getBannerList().then(res => {
    bannerList.value = res.data.map(el => {
      el.base_content = formatText(el.base_content)
      el.product_base_content = formatText(el.product_base_content)
      el.workshop_titles = formatText(el.workshop_titles)
      el.base_title = formatText(el.base_title)
      el.product_base_title = formatText(el.product_base_title)
      el.product_base_content = formatText(el.product_base_content)
      return el
    })
    if (getUrlParams('type')) {
      curBannerId.value = getUrlParams('type')
      curBannerIndex.value = bannerList.value.findIndex(el => el.id == getUrlParams('type'))
      curInfo.value = bannerList.value[curBannerIndex.value]
      // setTimeout(() => {
      //   changeContent(curBannerId.value, curBannerIndex.value)
      // }, 600)
    } else {
      curBannerId.value = bannerList.value[0].id
      curBannerIndex.value = 0
      curInfo.value = bannerList.value[0]
    }
    initBannerSwiper()
    loadData('init')
    setTimeout(() => {
      hideLoading()
    }, 400)
  })
};

const bannerSlideTo = (id, index) => {
  curBannerId.value = id
  bannerSwiper.slideTo(index, 1000, false)
}


const initBannerSwiper = () => {
  bannerSwiper = new Swiper('.banner-swiper', {
    modules: [Mousewheel, EffectFade, Autoplay],
    loop: true,
    mousewheel: false,
    effect: 'fade',
    autoplay: {
      delay: 3000,
      disableOnInteraction: false,
    },
    on: {
      init: swiper => {
        swiper.slideTo(curBannerIndex.value)
        loadData('init')
        // window.scroll(0, 0)
      },
      slideChangeTransitionStart: swiper => {
        curBannerId.value = bannerList.value[swiper.realIndex].id
      },
    }
  })
};

const changeContent = (id, index) => {
  reloadData(id, index)
  changeSearchParams({type: id})
  VueScrollTo.scrollTo('.content-main', 300, {
    container: 'body',
    offset: 0,
    easing: 'ease-in',
    force: true,
    cancelable: true,
    x: false,
    y: true
  })
}

const showVideo = (videoUrl, posterUrl) => {
  videoPopupRef.value.show(videoUrl, posterUrl)
};

const reloadData = (id, index) => {
  curBannerId.value = id
  curBannerIndex.value = index
  curInfo.value = bannerList.value[index]
  loadData()
};

const loadData = (type) => {
  // getManufactureInfo().then(res => {
  //   info.value = res.data.list.map
  //   info.value.base_content = formatText(res.data.list.base_content)
  //   info.value.base_company_title = formatText(res.data.list.base_company_title)
  //   info.value.base_company_content = formatText(res.data.list.base_company_content)
  // })
  
  getDataInfo({ bases_id: curBannerId.value }).then(res => {
    jdList.value = res.data.map(el => {
      if (el.titles.indexOf('+') >= 0) {
        el.titles = el.titles.split('+')[0]
        el.hasPlus = true
      } else {
        el.hasPlus = false
      }
      return el
    })
  })
  getWorkShopList({ bases_id: curBannerId.value }).then(res => {
    workShopList.value = res.data
    initSlSwiper(type)
  })
  
  getQualityList({ bases_id: curBannerId.value }).then(res => {
    qaList.value = res.data.map(el => {
      el.titles2 = formatText(el.titles2)
      return el
    })
    initQualitySwiper(type)
  })

  getBaseAttrList({ bases_id: curBannerId.value }).then(res => {
    fyList.value = res.data
  })
};

const initSlSwiper = (type) => {
  if (slSwiper && workShopList.length > 0) {
    slSwiper.update()
  } else {
    slSwiper = new Swiper('.sl-swiper', {
      slidesPerView: 'auto',
      loopedSlides: workShopList.value.length * 2,
      loop: true,
      centeredSlides: true,
      centeredSlidesBounds: true,
      spaceBetween: '1.82%',
      modules: [Navigation],
      navigation: {
        nextEl: '.next-btn',
        prevEl: '.prev-btn',
      },
      on: {
        init: swiper => {
          // swiper.slideTo(1)
        }
      }
    })
  }
}

// const slSwiperToPrev = () => {
//   slSwiper.slidePrev()
// }
// const slSwiperToNext = () => {
//   slSwiper.slideNext()
// }
const initQualitySwiper = () => {
  if (qaSwiper && qaList.length > 0) {
    slSwiper.update()
    setTimeout(() => {
      mainSwiper.update()
    }, 200)
  } else {
    qaSwiper = new Swiper('.zl-swiper', {
      modules: [EffectFade],
      effect: 'fade',
      on: {
        slideChangeTransitionStart: swiper => {
          curQaIndex.value = swiper.realIndex
        }
      }
    })
  }
};

const showQaDetail = index => {
  curQaIndex.value = index
  qaSwiper.slideTo(index, 1000, false)
};
</script>

<style lang="scss">
@use '@/assets/style/common.scss';
.page {
  width: 100%;
  height: 100%;
  position: relative;
}
.banner, .banner-box {
  width: 100%;
  height: 100vh;
  position: relative;
}
.banner-inner {
  position: absolute;
  top: 40%;
  left: 10rem /* 160/16 */;
  transform: translateY(-50%);
  width: 31.25rem /* 500/16 */;
  z-index: 10;
  .banner-title {
    color: #FFFFFF;
    font-size: 2.8125rem /* 45/16 */;
    letter-spacing: .02em;
    line-height: 1;
    font-weight: 500;
  }
  .banner-desc {
    margin-top: 1.5625rem /* 25/16 */;
    font-size: 1.625rem /* 26/16 */;
    line-height: 1;
    font-weight: 500;
    letter-spacing: .02em;
    color: #FFFFFF;
  }
  .banner-content {
    margin-top: 2.1875rem /* 35/16 */;
    color: rgba(255,255,255,.8);
    font-size: .9375rem /* 15/16 */;
    line-height: 1;
  }
  .video-btn {
    width: 8.625rem /* 138/16 */;
    height: 3.125rem /* 50/16 */;
    margin-top: 3.75rem /* 60/16 */;
    background: #E50012;
    border-radius: 2px;
    .icon {
      width: 1.375rem /* 22/16 */;
      height: 1.375rem /* 22/16 */;
      margin-right: .5rem /* 8/16 */;
    }
    .label {
      font-size: .9375rem /* 15/16 */;
      color: #FFFFFF;
      line-height: 1;
    }
  }
}

.main-swiper {
  height: 100vh;
  overflow: hidden;
}
.section {
  width: 100%;
}
.brand-btn {
  margin-top: 2.625rem /* 42/16 */;
  width: 10rem /* 160/16 */;
  height: 3.25rem /* 52/16 */;
  background: #E50012;
  border-radius: 2px;
  .label {
    font-size: 1rem /* 16/16 */;
    color: #FFFFFF;
    line-height: 1;
  }
  .iconfont {
    font-size: 1rem /* 16/16 */;
    line-height: 1;
    color: #FFFFFF;
    margin-left: .125rem /* 2/16 */;
  }
}
.banner-tabs {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 7.375rem /* 118/16 */;
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(12.75rem /* 204/16 */);
  z-index: 10;
  overflow: hidden;
}
.banner-tab {
  display: flex;
  align-items: center;
  height: 7.375rem /* 118/16 */;
  position: relative;
  cursor: pointer;
  &+.banner-tab {
    margin-left: 3.5rem /* 56/16 */;
  }
  &.active {
    &::after {
      content: '';
      display: block;
      width: 100%;
      height: .1875rem /* 3/16 */;
      background: #E50012;
      position: absolute;
      bottom: 0;
      left: 0;
    }
  }
  .photo {
    width: 4rem /* 64/16 */;
    height: 4rem /* 64/16 */;
    margin-right: 1rem /* 16/16 */;
    border-radius: 2px;
    overflow: hidden;
  }
  .label {
    font-size: .875rem /* 14/16 */;
    color: #FFFFFF;
  }
}
.jd-box {
  padding: 5.625rem /* 90/16 */ 0 4.125rem /* 66/16 */;
  background: #FFFFFF;
}
.jd-main {
  width: 110rem /* 1760/16 */;
  margin: 0 auto;
  max-width: 92%;
  .jd-title {
    font-size: 2.8125rem /* 45/16 */;
    line-height: 1;
    font-weight: 500;
    color: #000000;
  }
  .jd-content {
    margin-top: 2.25rem /* 36/16 */;
    font-size: 1.0625rem /* 17/16 */;
    line-height: 2.375rem /* 38/16 */;
    color: #595757;
  }
}
.jd-card {
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  margin-top: 3.125rem /* 50/16 */;
  .jd-card-l {
    width: 100%;
    height: 2px;
    background: #FFFFFF;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 10;
  }
  .jd-card-s1 {
    width: 2px;
    height: 34.5rem /* 552/16 */;
    background: #FFFFFF;
    position: absolute;
    top: 0;
    left: 33.3%;
    z-index: 10;
  }
  .jd-card-s2 {
    width: 2px;
    height: 34.5rem /* 552/16 */;
    background: #FFFFFF;
    position: absolute;
    top: 0;
    left: 66.6%;
    z-index: 10;
  }
}
.jd-list {
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  
}
.jd-item {
  width: 33.33%;
  height: 17.25rem /* 276/16 */;
  cursor: pointer;
  padding: 2.5rem /* 40/16 */;
  &:hover {
    .jd-item-title .jd-item-icon {
      display: block;
    }
  }
  .jd-item-title {
    position: relative;
    display: flex;
    align-items: center;
    .title {
      font-size: 3.75rem /* 60/16 */;
      font-weight: 500;
      color: #FFFFFF;
      line-height: 1;
      position: relative;
      z-index: 10;
    }
    .unit {
      font-size: 2.5rem /* 40/16 */;
      line-height: 1;
      margin-left: .3125rem /* 5/16 */;
      color: #FFFFFF;
      font-weight: 500;
      position: relative;
      top: .125rem /* 2/16 */;
      position: relative;
      z-index: 10;
    }
    .jd-item-icon {
      position: relative;
      left: -.3125rem /* 5/16 */;
      bottom: -.625rem /* 10/16 */;
      transform: skewX(-30deg);
      opacity: 1;
      background: #E50012;
      width: .8125rem /* 13/16 */;
      height: 2rem /* 32/16 */;
      display: none;
    }
  }
  .jd-item-desc {
    margin-top: 1.625rem /* 26/16 */;
    line-height: 1;
    font-size: 1rem /* 16/16 */;
    color: rgba(255,255,255,.85)
  }
}
.sl-box {
  padding: 5.625rem /* 90/16 */ 0 4.5625rem /* 73/16 */;
  background: #F9F9F9;
  overflow: hidden;
  .sl-hd {
    width: 107.5rem /* 1720/16 */;
    max-width: 92%;
    margin: 0 auto 3.75rem /* 60/16 */;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }
  .sl-title {
    .title {
      font-size: 2.8125rem /* 45/16 */;
      line-height: 1;
      font-weight: 500;
      color: #000000;
      letter-spacing: .02em;
    }
    .desc {
      margin-top: 1.5625rem /* 25/16 */;
      line-height: 1;
      color: #595757;
      font-size: 1.0625rem /* 17/16 */;
    }
  }
}
.sl-swiper-box {
  width: 100%;
  height: 35.9375vw;
  position: relative;
  .next-btn, .prev-btn {
    position: absolute;
    width: 3.125rem /* 50/16 */;
    height: 3.125rem /* 50/16 */;
    border-radius: 50%;
    background: rgba(0,0,0,.2);
    position: absolute;
    backdrop-filter: blur(83.33px);
    box-shadow: 0px 0px 83.33px rgba(0, 0, 0, 0.25);
    z-index: 10;
    cursor: pointer;
    &:hover {
      background: #E50012;
      .iconfont {
        color: #FFFFFF;
      }
    }
    .iconfont {
      font-size: 1.125rem /* 18/16 */;
      color: #FFFFFF;
    }
  }
  .next-btn {
    top: 50%;
    right: 5rem /* 80/16 */;
    transform: translateY(-50%);
  }
  .prev-btn {
    top: 50%;
    left: 5rem /* 80/16 */;
    transform: translateY(-50%);

  }
}
.sl-swiper {
  width: 100%;
  height: 35.9375vw;
  .swiper-slide {
    width: 65vw;
    height: 35.9375vw;
  }
}
.app-card {
  width: 65vw;
  height: 35.9375vw;
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  .app-inner {
    padding: 4.1875rem /* 67/16 */ 3.125rem /* 50/16 */ 3.125rem /* 50/16 */;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 61%);
    z-index: 10;
    width: 100%;
    .title {
      font-size: 30px;
      line-height: 1;
      color: #FFFFFF;
      font-weight: 500;
    }
    .desc {
      margin-top: .9375rem /* 15/16 */;
      font-size: 1rem /* 16/16 */;
      line-height: 1.875rem /* 30/16 */;
      color: rgba(255,255,255,.85);
      width: 43.75rem /* 700/16 */;
    }
  }
}
.zl-box {
  width: 100%;
  height: 100vh;
  position: relative;
  .zl-inner {
    position: absolute;
    z-index: 20;
    top: 7.8125vw;
    left: 8.3333vw;
    .zl-inner-tag {
      font-size: 1rem /* 16/16 */;
      color: rgba(255,255,255,.85);
      line-height: 1;
    }
    .zl-inner-title {
      margin-top: 1.5625rem /* 25/16 */;
      font-size: 2.8125rem /* 45/16 */;
      color: #FFFFFF;
      line-height: 1;
      letter-spacing: .02em;
      font-weight: 500;
    }
  }
}
.zl-banner {
  width: 100%;
  height: 100vh;
}
.zl-swiper, .zl-banner {
  width: 100%;
  height: 100vh;
  position: relative;
}
.fy-box {
  position: relative;
  width: 100vw;
  height: 100vh;
  .fy-inner {
    position: absolute;
    top: 9.375rem /* 150/16 */;
    left: 5rem /* 80/16 */;
    z-index: 10;
    .fy-title {
      font-size: 2.8125rem /* 45/16 */;
      line-height: 3.75rem /* 60/16 */;
      font-weight: 500;
      color: #FFFFFF;
      width: 37.5rem /* 600/16 */;
    }
    .fy-desc {
      margin-top: 1.25rem /* 20/16 */;
      line-height: 2.25rem /* 36/16 */;
      color: rgba(255,255,255,.85);
      width: 37.5rem /* 600/16 */;
    }
  }
}
.fy-info {
  position: absolute;
  bottom: 3.75rem /* 60/16 */;
  left: 5rem /* 80/16 */;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 26.5625rem /* 425/16 */;
}
.fy-card {
  width: 12.8125rem /* 205/16 */;
  min-height: 7.5rem /* 120/16 */;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6.25rem /* 100/16 */);
  padding: 1.5rem /* 24/16 */ 1.375rem /* 22/16 */;
  &.long {
    width: 100%;
  }
  &:nth-child(n+3) {
    margin-top: .9375rem /* 15/16 */;
  }
  .card-icon {
    width: 2.0625rem /* 33/16 */;
    height: 2.0625rem /* 33/16 */;
  }
  .card-label {
    margin-top: 1.375rem /* 22/16 */;
    color: #FFFFFF;
    font-size: 1.125rem /* 18/16 */;
    line-height: 1;
  }
}
.zl-tabs {
  position: absolute;
  width: 83.3333vw;
  bottom: 3.625rem /* 58/16 */;
  left: 8.3333vw;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  z-index: 20;
 
}
.zl-tab {
  width: calc(33.33% - 1.5rem /* 24/16 */);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(6.25rem /* 100/16 */);
  transition: all .3s ease-in-out;
  &.active {
    .zl-content {
      padding-bottom: 2.1875rem /* 35/16 */;
      height: auto;
      visibility: visible;
    }
    .zl-hd {
      .zl-icon {
        transform: rotate(180deg);
      }
    }
  }
}
.zl-hd {
  width: 100%;
  height: 5rem /* 80/16 */;
  padding: 0 1.5625rem /* 25/16 */ 0 2.1875rem /* 35/16 */;
  cursor: pointer;
  .zl-tab-title {
    font-size: 1.25rem /* 20/16 */;
    line-height: 1;
    color: #FFFFFF;
    font-weight: 500;
  }
  .zl-icon {
    width: 2.5rem /* 40/16 */;
    height: 2.5rem /* 40/16 */;
    border-radius: 50%;
    background: #FFFFFF;
    transition: all .3s ease-in-out;
    cursor: pointer;
    .iconfont {
      font-size: 1rem /* 16/16 */;
      color: #000000;
    }
  }
}
.zl-content {
  height: 0;
  font-size: 1rem /* 16/16 */;
  line-height: 2.25rem /* 36/16 */;
  color: #F2F2F2;
  transition: all .3s ease-in-out;
  visibility: hidden;
  overflow: hidden;
  padding: 0 2.1875rem /* 35/16 */;
  padding-bottom: 0;
}
</style> 